<!DOCTYPE html>
<html lang="en">

<head>
    <link rel="stylesheet" href="./element-ui/index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<style scoped>
    body {
        height: 300vh;
    }

    .box {
        display: flex;
        justify-content: center;
    }

    #one {
        color: red;
        width: 20px;
        height: 20px;
        border-radius: 10px;
        position: relative;
        background-color: red;
        margin-left: 20px;
    }

    .move {
        width: 40px;
        height: 40px;
        background-color: orange;
        position: relative;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 150px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>

<body>
    <div id="app" v-if="true">
        <el-button @click="visible = true">Button</el-button>
        <el-dialog :visible.sync="visible" title="Hello world">
            <p>Try Element</p>
        </el-dialog>
        <div class="box">
            <div id="one"></div>
        </div>
        <button class="move">移动</button>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
        </svg>
        <el-row>
            <el-col :span="12"><div class="grid-content bg-purple">222</div></el-col>
            <el-col :span="12"><div class="grid-content bg-purple-light">222121212122121</div></el-col>
          </el-row>
    </div>
</body>
<script src="./gather/echarts.min.js"></script>
<script src="./gather/axios.min.js"></script>
<script src="./element-ui/vue2.js"></script>
<script src="./element-ui/index.js"></script>
<script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })

</script>
<script>
 /**
  * 以下是一些经典的力扣（LeetCode）算法题，涵盖不同的难度和算法类型：
  *
  * 1. 两数之和 (Two Sum)
  * 题号: 1
  * 难度: 简单
  * 描述: 给定一个整数数组 nums 和一个目标值 target，请你在该数组中找出和为目标值的那两个整数，并返回他们的数组下标。
  * */
 // 暴力法-双重for循环
  function twoSum(nums, target) {
    for (let i = 0; i < nums.length; i++) {
        for (let j = i + 1; j < nums.length; j++) {
            if (nums[i] + nums[j] === target) {
                return [i, j];
            }
        }
    }
    return [];
}
twoSum([1,2,3,4], 1)

function twoSum2(nums, target) {
    const map = new Map();
    for (let i = 0; i < nums.length; i++) {
        const complement = target - nums[i];
        if (map.has(complement)) {
            return [map.get(complement), i];
        }
        map.set(nums[i], i);
    }
    return [];
}

twoSum2([1,2,3,4], 2)




    /*
    在 JavaScript 中，深拷贝和浅拷贝是复制对象的两种方式。它们的主要区别在于如何处理对象内部的嵌套对象。
    
    浅拷贝
    浅拷贝只复制对象的第一层属性，如果属性是引用类型（如对象、数组），则复制的是引用，而不是实际的对象。
    
    实现方法
    可以使用 Object.assign() 或扩展运算符（...）来实现浅拷贝。
    *
    */

    // const original = { a: 1, b: { c: 2 } };
    // const shallowCopy1 = Object.assign({}, original);

    // // // 使用扩展运算符
    // const shallowCopy2 = { ...original };

    // console.log(shallowCopy1); // { a: 1, b: { c: 2 } }
    // console.log(shallowCopy2); // { a: 1, b: { c: 2 } }

    // // // 修改嵌套对象
    // shallowCopy1.b.c = 3;
    // console.log(original.b.c); // 输出: 3 (原对象也被修改)


    /**
     * 深拷贝
    深拷贝会递归复制对象的所有层级，确保每个嵌套对象都是独立的副本。
    
    实现方法
    可以使用 JSON.stringify() 和 JSON.parse() 方法来实现深拷贝，
    但这种方法只适用于对象中没有函数、undefined、Symbol、Date 等特殊对象的情况。
     * 
    */
    // const original2 = { a: 1, b: { c: 2 } };
    // const deepCopy = JSON.parse(JSON.stringify(original2));

    // console.log(deepCopy); // { a: 1, b: { c: 2 } }

    // // 修改嵌套对象
    // deepCopy.b.c = 3;
    // console.log(original2.b.c); // 输出: 2 (原对象未被修改)

    /**
     * 自定义深拷贝函数
      对于更复杂的对象，可以实现一个自定义的深拷贝函数：
     * */

    // function deepClone(obj) {
    //     if (obj === null || typeof obj !== 'object') {
    //         return obj; // 基本类型直接返回
    //     }

    //     // 处理数组
    //     if (Array.isArray(obj)) {
    //         return obj.map(item => deepClone(item));
    //     }

    //     // 处理对象
    //     const copy = {};
    //     for (const key in obj) {
    //         if (obj.hasOwnProperty(key)) {
    //             copy[key] = deepClone(obj[key]);
    //         }
    //     }
    //     return copy;
    // }

    // const original3 = { a: 1, b: { c: 2 } };
    // const deepCopy3 = deepClone(original3);

    // deepCopy3.b.c = 3;
    // console.log(original3.b.c); // 输出: 2 (原对象未被修改)


    /*
        总结
        浅拷贝：只复制对象的第一层属性，嵌套对象仍然引用原对象。
        深拷贝：递归复制所有层级，嵌套对象是独立副本。
    */









    /**
     * 防抖（Debounce）和节流（Throttle）是常用的性能优化技术，主要用于控制频繁触发的事件（如滚动、输入等），避免不必要的函数调用。
    防抖（Debounce）    
    防抖的核心思想是：在事件触发后，延迟一段时间再执行函数，如果在这段时间内再次触发事件，则重新计时。常用于处理输入框的输入事件。
     * */
    function debounce(func, delay) {
        let timeout;
        return function (...args) {
            clearTimeout(timeout);
            timeout = setTimeout(() => {
                func.apply(this, args);
            }, delay);
        };
    }
    // 示例场景：输入框搜索
    // const searchInput = document.getElementById('search');
    // searchInput.addEventListener('input', debounce(function() {
    //     console.log('Searching for:', this.value);
    // }, 300));

    function throttle(func, limit) {
        let lastFunc;
        let lastRan;
        return function (...args) {
            if (!lastRan) {
                func.apply(this, args);
                lastRan = Date.now();
            } else {
                clearTimeout(lastFunc);
                lastFunc = setTimeout(() => {
                    if ((Date.now() - lastRan) >= limit) {
                        func.apply(this, args);
                        lastRan = Date.now();
                    }
                }, limit - (Date.now() - lastRan));
            }
        };
    }

    // 示例场景：滚动监听
    // window.addEventListener('scroll', throttle(function() {
    //     console.log('Scroll event fired!');
    // }, 1000));


    /**
     * 示例场景说明
    防抖场景：
    
    在输入框中，用户输入搜索关键词时，每次输入后会延迟 300 毫秒再执行搜索操作，这样可以避免频繁的搜索请求，从而减少服务器负担。
    节流场景：
    
    在页面滚动时，监听滚动事件，每 1000 毫秒才执行一次处理函数，这样可以避免在快速滚动时频繁触发事件，提升性能。
    总结
    防抖：适合处理用户输入等不需要频繁触发的场景。
    节流：适合处理滚动、窗口调整等需要定期执行的场景。
     * 
    */



    // 使用 axios
    // axios.get('http://127.0.0.1:8888/')
    //     .then(response => {
    //         console.log(response.data, '444');
    //     })
    //     .catch(error => {
    //         console.error(error, '47777');
    //     });
    // 发送 GET 请求到根路径
    // axios.get('http://127.0.0.1:8888/')
    //     .then(response => {
    //         console.log('Response from server:', response.data); // 打印服务器响应
    //     })
    //     .catch(error => {
    //         console.error('Error occurred:', error); // 处理错误
    //     });

// 发送 GET 请求到根路径
axios.get('http://127.0.0.1:8888/')
    .then(response => {
        console.log('Response from server--这是我请求到的数据:', response.data); // 打印服务器响应
    })
    .catch(error => {
        console.error('Error occurred:', error); // 处理错误
    });
// http://127.0.0.1:8888/
// 发送 GET 请求到一个不存在的路径，触发 404
// axios.get('http://127.0.0.1:5500/unknown-path')
//     .then(response => {
//         console.log('Response from server:', response.data); // 打印服务器响应
//     })
//     .catch(error => {
//         console.error('Error occurred:', error.response.data); // 打印错误响应
//     });

    const btn = document.querySelector('#one')
    const move = document.querySelector('.move')
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '[...a]'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);


    btn.addEventListener('click', function () {
        console.log('144444')
    })
    let currentLeft
    function init() {
        // 获取当前的 left 值，并去除 'px' 后缀  
        var currentLeft = parseInt(btn.style.left.replace('px', ''), 10) || 0;

        // 递增 left 值  
        currentLeft += 10;

        // 将新的 left 值设置回元素，并附加 'px'  
        btn.style.left = currentLeft + 'px';
    }
    move.addEventListener('click', function () {
        setInterval(() => {
            init()
        }, 0)
    })


    const p = new Promise((resolve, reject) => {
        // 假设我们有一个异步操作，比如从服务器获取数据  
        // 但在这里，我们只用 setTimeout 来模拟异步延迟  
        setTimeout(() => {
            // 随机决定是 resolve 还是 reject  
            const success = Math.random() > 0.5; // 50% 的机会成功  

            if (success) {
                // 异步操作成功，调用 resolve  
                resolve('数据获取成功！');
            } else {
                // 异步操作失败，调用 reject  
                reject('数据获取失败！');
            }
        }, 1000); // 延迟 1000 毫秒（1秒）  
    })

    // 使用 Promise 的 then 和 catch 方法来处理结果  
    p.then(
        result => {
            console.log(result) // 如果 Promise 成功，打印结果  
        },
        error => {
            console.error(error)  // 如果 Promise 失败，打印错误  
        }
    );

    setTimeout(() => {
        console.log('7777')
    })
</script>

</html>